<template>
    <ElCard shadow="hover" class="relative h-[100%]" style="min-height:508px;" >
        <div class="absolute" style="right: 20px;cursor: pointer;z-index: 1;" @click.stop="refreshHandler">
            <Icon icon="ant-design:sync-outlined" :size="25"></Icon>
        </div>
        <el-tabs v-model="activeName" class="relative" @tab-click="handleClick">
            <ElSkeleton :loading="loading" animated :rows="4">
                <el-tab-pane label="系统日志" name="sysLog">
                    <el-scrollbar height="400px" class="bg-[#000] text-[#fff] p-6px">
                        {{ dataInfo.SysLog }}
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="面板日志" name="panelLog">
                    <el-scrollbar height="400px" class="bg-[#000] text-[#fff]  p-6px">
                        {{ dataInfo.PanelLog }}
                    </el-scrollbar>
                </el-tab-pane>
            </ElSkeleton>
        </el-tabs>
    </ElCard>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getPanelLogAPI, lastLogOutput } from '@/api/systemMonitor'
import type { TabsPaneContext } from 'element-plus'
import { Base64 } from "js-base64"
const loading = ref(true)
let dataInfo = reactive({})


onMounted(() => {
    getData();
})
//获取数据
function getData() {
    loading.value = true;
    const getAllApi = async () => {
        return await Promise.all([lastLogOutput(), getPanelLogAPI()])
    }
    getAllApi().then((result) => {
        dataInfo = {
            SysLog: Base64.decode(result[0].data),
            PanelLog: Base64.decode(result[1].data),
        }
    }).finally(() => {
        loading.value = false;
    })
}
const activeName = ref('sysLog')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//刷新
const refreshHandler = () => {
    console.log("refresh");

    getData();
}
</script>
<style lang="less" scoped>
.cardItem {
    margin-top: 20px;

    &:nth-child(1),
    &:nth-child(2) {
        margin-top: 0px;
    }

}
</style>